<template>
  <div class="aaa">
    <div>aaa</div>
    <div class="over-box"></div>
    <div class="foot-box">
      <div class="box1">
        <div class="box2"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import "intersection-observer";
import { Vue, Component } from "vue-property-decorator";
@Component
export default class aaa extends Vue {
  // IntersectionObserverCallback(entries: any, observer: any) {
  //   entries.forEach((item: any) => {
  //     console.log(item);
  //     // Each entry describes an intersection change for one observed target element:
  //     // entry.boundingClientRect
  //     // entry.intersectionRatio
  //     // entry.intersectionRect
  //     // entry.isIntersecting
  //     // entry.rootBounds
  //     // entry.target
  //     // entry.time
  //   });
  // }
  // mounted() {
  //   let _this = this;
  //   let IntersectionObserverOption = {
  //     root: document.getElementsByClassName("IntersectionObserver")[0],
  //     rootMargin: "0px",
  //     threshold: 1.0,
  //   };
  //   let io = new IntersectionObserver(
  //     _this.IntersectionObserverCallback,
  //     IntersectionObserverOption
  //   );
  //   console.log(io);
  //   // console.log(IntersectionObserver);
  // }
}
</script>
<style lang="less">
.over-box {
  // width: 100vw;
  height: 2000px;
  border: 1px solid red;
}
.foot-box {
  height: 100px;
  border: 1px solid blue;
  overflow: scroll;
  > div {
    height: 200px;
    > div {
      margin-top: 120px;
      width: 20px;
      height: 20px;
      background: skyblue;
    }
  }
}
</style>